<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      :header-row-style="{ 'background-color': '#000' }"
    >
      <el-table-column prop="number" label="试题编号" width="240" />
      <el-table-column prop="subject" label="学科" width="220" />
      <el-table-column prop="catalog" label="目录" width="120" />
      <el-table-column prop="questionType" label="题型" width="120">
        <template v-slot="{ row }">
          {{
            row.questionType === 1
              ? '单选'
              : row.questionType === 2
                ? '多选'
                : '简单'
          }}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干">
        <template v-slot="{ row }">
          <span v-html="row.question" />
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="200">
        <template v-slot="{ row }">
          <span>{{ row.addDate | datatime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度">
        <template v-slot="{ row }">
          {{
            row.questionType === 1
              ? '简单'
              : row.questionType === 2
                ? '一般'
                : '困难'
          }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="180" />
      <el-table-column prop="chkState" label="审核状态">
        <template v-slot="{ row }">
          {{
            row.chkState === 1 ? '通过' : row.chkState === 2 ? '拒绝' : '待审核'
          }}
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" />
      <el-table-column prop="chkUser" label="审核人" width="180" />
      <el-table-column prop="publishState" label="发布状态">
        <template v-slot="{ row }">
          {{ row.publishState === 1 ? '上架' : '下架' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" prop="address" label="操作" width="270">
        <template v-slot="{ row }">
          <el-button type="text" @click="previewFn(row.id)">预览</el-button>
          <el-button
            type="text"
            :disabled="!!row.chkRemarks"
            @click="toExamine(row.id)"
          >
            审核
          </el-button>
          <el-button
            type="text"
            :disabled="!row.publishState"
            @click="editFn(row.id)"
          >
            修改
          </el-button>
          <el-button type="text" @click="editState(row.id, row.publishState)">
            {{ row.publishState === 1 ? '上架' : '下架' }}
          </el-button>
          <el-button
            type="text"
            :disabled="!row.publishState"
            @click="delRand(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹层 -->
    <el-dialog
      title="题目审核"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <template>
        <el-radio v-model="form.chkState" :label="1">通过</el-radio>
        <el-radio v-model="form.chkState" :label="2">拒绝</el-radio>
      </template>
      <el-input
        v-model="form.chkRemarks"
        type="textarea"
        placeholder="请输入内容"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="examineFn"> 确 定 </el-button>
      </span>
    </el-dialog>
    <preview :show-dialog.sync="showDialog" :question-id="questionId" />
  </div>
</template>
<script>
import { editStateApi, delRandomsApi, editcheckApi } from '@/api/questionBank'
import preview from './preview.vue'
export default {
  components: { preview },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    tableData: Array
  },
  data() {
    return {
      isDisabled: true, // 按钮禁用
      showDialog: false, // 弹层状态
      questionId: null, // 试题id
      dialogVisible: false, // 弹层状态
      // 弹层表单
      form: {
        id: null,
        chkState: 1,
        chkRemarks: ''
      }
    }
  },
  methods: {
    // 预览
    previewFn(id) {
      this.questionId = id
      this.showDialog = true
    },
    // 修改
    editFn(id) {
      this.$router.push({
        path: '/test-question-input',
        query: {
          id: id
        }
      })
    },
    // 上下架
    async editState(id, publishState) {
      if (publishState === 0) {
        await editStateApi(id, 1)
        this.$message({
          type: 'success',
          message: '下架成功!'
        })
      } else {
        await editStateApi(id, 0)
        this.$message({
          type: 'success',
          message: '上架成功!'
        })
      }
      this.$emit('editState')
    },
    // 删除弹出框
    delRand(id) {
      this.$confirm('此操作将删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delRandomsApi(id)
          this.$emit('editState')
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 打开弹层
    toExamine(id) {
      this.form.id = id
      this.dialogVisible = true
    },
    // 弹层关闭
    handleClose() {
      this.form = {
        id: null,
        chkState: 1,
        chkRemarks: ''
      }
      this.dialogVisible = false
    },
    // 审核
    async examineFn() {
      if (this.form.chkRemarks !== '') {
        await editcheckApi(this.form)
        this.$emit('editState')
        this.handleClose()
      } else {
        this.$message({
          type: 'warning',
          message: '请输入审核意见!'
        })
      }
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog__header {
  background-color: #409eff;
  border-radius: 10px 10px 0 0;
  z-index: inherit;
  color: #fff;
}
::v-deep .el-dialog {
  border-radius: 10px 10px 10px 10px;
}
</style>
